<template>
  <van-popup
    v-model="memberDialog"
    get-container="#app"
    position="right"
    :style="{ width: '100%', height: '100%' }"
  >
    <div class="add_member">
      <van-nav-bar class="main_header" title="添加人员">
        <template #left>
          <span @click="close()">返回</span>
        </template>
        <template #right>
          <span @click="submitMember">确定</span>
        </template>
      </van-nav-bar>
      <div class="add_member_content">
        <editIndividual ref="editIndividual" :user-data="createRegisterInputVO" :is-show-tag="true" />
      </div>
    </div>
    <div v-if="isPageLoading" class="page_loading fixed">
      <van-loading size="24px" vertical color="#fff">加载中...</van-loading>
    </div>
  </van-popup>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import { SiSTKWEventsManagementCreateRegisterWithTagsInput } from '@/lib/form/game/swaggerForm';
import EditIndividual from '@/viewMobile/components/PersonalInfo';
import {
  api_POST_EventsManagementRegisterWithtags,
  api_PUT_EventsManagementRegisterIdWithTags // 更新会员（包括Tags）
} from '@/extend/api/gameswaggerApi/app.js';
import { CopyData } from '@/lib';
export default {
  components: {
    EditIndividual
  },
  props: {
    delegationId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      createRegisterInputVO: new SiSTKWEventsManagementCreateRegisterWithTagsInput(),
      memberDialog: false,
      baseUrl: WEB_CONFIG.VUE_APP_SWAGGER_GAME_BASE,
      isAdd: true,
      personInfoId: '',
      isPageLoading: false
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      currentUserType: state => state.user.currentUserType
    })
  },
  created() {
    this.getDict();
  },
  methods: {
    open(createRegisterInputVO, personInfoId) {
      this.init(createRegisterInputVO);
      this.personInfoId = personInfoId || '';
      this.memberDialog = true;
    },
    ...mapActions({ getDict: 'dict/getDict' }),
    init(createRegisterInputVO) {
      this.isAdd = true;
      this.createRegisterInputVO = new SiSTKWEventsManagementCreateRegisterWithTagsInput();
      this.createRegisterInputVO.delegationId = this.delegationId;
      this.createRegisterInputVO.joinCurrentDelegation = true;
      if (createRegisterInputVO) {
        this.isAdd = false;
        CopyData(createRegisterInputVO, this.createRegisterInputVO);
      }
    },
    submitMember() {
      this.$refs.editIndividual.getInsideUserData().then(createRegisterInputVO => {
        console.log(createRegisterInputVO);
        if (createRegisterInputVO.imagePath) {
          createRegisterInputVO.registerTypeCode = 'I';
          if (this.isAdd) {
            this.addMember(createRegisterInputVO);
          } else {
            this.updateMember(createRegisterInputVO);
          }
        } else {
          this.$toast({ type: 'fail', message: `请上传头像` });
        }
      });
    },
    addMember (createRegisterInputVO) {
      this.isPageLoading = true;
      api_POST_EventsManagementRegisterWithtags(createRegisterInputVO).then(res => {
        this.isPageLoading = false;
        this.$toast.success('新增成功');
        this.$emit('refreshPage');
        this.memberDialog = false;
      }, error => {
        this.isPageLoading = false;
        this.$toast.fail(error.error.message);
      });
    },
    updateMember (createRegisterInputVO) {
      this.isPageLoading = true;
      api_PUT_EventsManagementRegisterIdWithTags(this.personInfoId, createRegisterInputVO).then(res => {
        this.isPageLoading = false;
        this.$toast.success('编辑成功');
        this.$emit('refreshPage');
        this.memberDialog = false;
      }, error => {
        this.isPageLoading = false;
        this.$toast.fail(error.error.message);
      });
    },
    close() {
      this.memberDialog = false;
    }
  }
};
</script>
<style>
.add_member .add_member_content {
  position: absolute;
  top: 46px;
  bottom: 0;
  width: 100%;
  left: 0;
  overflow: auto;
}
.upload_logo {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 100%;
  height: 200px;
  transform: translate(-50%, -50%);
}
</style>
